<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>QQ会员页面导航</title>
		<style>
			*{
				margin:0px;
				padding:0px;
			}
			.box{
				background-color:rgba(0,0,0,0.5);
			}
			img{
				width:140px;
				vertical-align: middle;
			}
			.box li{
				display:inline-block;
				text-decoration: none;
				font-size:16px;	
			}
			ul{
				width:1060px;
				margin: 0 auto;
				text-align: center;
			}
			li:nth-of-type(2),li:nth-of-type(9){
				margin-left:40px;
			}
			li:nth-of-type(n+3):nth-of-type(-n+8){
				margin-left:16px;
			}
			li:nth-of-type(n+9){
				/*width:80px;
				height:30px;
				line-height: 30px;*/
				padding: 4px 12px;
				border:1px #fad65c solid;
				border-radius:15px;
				text-align: center;
				}
			li:nth-of-type(9) a,li:nth-of-type(10) a{
				text-decoration: none;
				color:#fad65c;
			}
			li:nth-of-type(9):hover,li:nth-of-type(10):hover {
				background-color:#fad65c;
			}
			li:nth-of-type(9):hover a,li:nth-of-type(10):hover a{
				color:#9f6f0d;
			}
			
			/*li:nth-of-type(10){
				width:140px;
				height:30px;
				line-height: 30px;
				border:1px #fad65c solid;
				border-radius:15px;
				text-align: center;
				}*/
			ul li:nth-of-type(n+2):nth-of-type(-n+8) a{
				text-decoration: none;
				color:white;
			}
			ul li:nth-of-type(n+2):nth-of-type(-n+8):hover a{
				color:blue;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><a href="#"><img src="image/logo.png" /></a></li>
				<li><a href="#">功能特权</a></li>
				<li><a href="#">游戏特权</a></li>
				<li><a href="#">生活特权</a></li>
				<li><a href="#">会员活动</a></li>
				<li><a href="#">成长体系</a></li>
				<li><a href="#">年费专区</a></li>
				<li><a href="#">超级会员</a></li>
				<li><a href="#">登录</a></li>
				<li><a href="#">开通超级会员</a></li>
			</ul>
		</div>
	</body>
</html>
 

 

 

 

 

 

 


